<template>
  <div class="parent">
    <div class="user-avatar" v-if="avatarVisiable">
      <img src="@/assets/images/headericon.jpg" alt="" />
    </div>
    <div class="child">
      <div class="input-box-container">
        <!-- 文本编辑器 -->
        <RichTextInput ref="RichTextInputRef" :modelValue="inputContent" @updata:modelValue="receiveRichText"> </RichTextInput>
        <div class="input-action-part">
          <div class="acition-emoji">
            <span class="emoji-trigger" ref="emojiTriggerRef" @click="handleEmojiVisiable">
              <i class="iconfont icon-biaoqing"></i>
              表情
            </span>
            <span class="emoji-trigger">
              <input type="file" id="imgbox" />
              <label for="imgbox" class="uploadimg-box"><i class="iconfont icon-tupian-xianxing"></i>图片</label>
            </span>
          </div>
          <div class="acition-btn">
            <span class="content-toggle">Ctrl + Enter</span>
            <el-button class="content-post-btn" :disabled="publishBtnVisiable" :class="{ active: activedBtn }" @click="doPost">发布评论</el-button>
          </div>
        </div>
      </div>
      <div class="emoji-container" v-show="isEmojiShow">
        <!-- 表情面板 -->
        <EmojiPanel @emojiClick="onEmojiClick"></EmojiPanel>
      </div>
    </div>
  </div>
  <div class="contents-list">
    <CommentList :key-map="keyMap" :showNumber="2" :comment-datas="commentDatas" @submitComment="submitComment"></CommentList>
  </div>
</template>

<script setup>
import CommentList from './ContentList.vue'
import { onMounted, ref, watch, watchEffect } from 'vue'
defineProps({
  avatarVisiable: {
    type: Boolean,
    default: true
  }
})
const inputContent = ref('')
const activedBtn = ref(false)
const isEmojiShow = ref(false)
const publishBtnVisiable = ref(false)
/* 表情按钮 控制显示隐藏*/
const handleEmojiVisiable = () => {
  isEmojiShow.value = !isEmojiShow.value
}
/* 接收子组件编辑器传来的值 */
const receiveRichText = (value) => {
  inputContent.value = value
}
watch(
  () => inputContent.value,
  (newValue, oldValue) => {
    console.log(newValue, 'newValue')
    console.log(oldValue, 'oldValue')
    inputContent.value = newValue
  },
  { immediate: true },
  { deep: true }
)
/* 监听：当点击表情按钮的时候input-box不失去焦点 */
const emojiTriggerRef = ref(null)
const RichTextInputRef = ref(null)
onMounted(() => {
  if (emojiTriggerRef.value) {
    emojiTriggerRef.value.addEventListener('click', (event) => {
      document.querySelector('.input-box').focus()
    })
  }
  if (RichTextInputRef.value.inputBoxRef) {
    /*  监听编辑器有无值 */
    RichTextInputRef.value.inputBoxRef.addEventListener('input', (event) => {
      if (event.target.innerText.length > 0 || event.target.innerHTML.length > 0) {
        publishBtnVisiable.value = false
        activedBtn.value = true
      } else {
        publishBtnVisiable.value = true
        activedBtn.value = false
      }
    })
  }
  document.addEventListener('mouseup', (event) => {
    let emojiContainer = document.querySelector('.emoji-container')
    if (emojiContainer && !emojiContainer.contains(event.target)) {
      isEmojiShow.value = false
    }
  })
})
/* 发布评论 */
const doPost = () => {
  console.log(inputContent.value, '发布评论')
  inputContent.value = '内容改变'
}

/* 点击emoji方法 */
const onEmojiClick = (i) => {
  console.log(i, 'emoji')
  // const emoji = `<img class="emoji-item" src="https://cdn.sunofbeaches.com/emoji/${i}.png" />`
  let targetUrl = `https://cdn.sunofbeaches.com/emoji/${i}.png`
  /* 如果输入框没焦点 就要自动获取焦点 */
  let inputBox = RichTextInputRef.value
  if (document.activeElement !== inputBox) {
    inputBox.inputBoxRef.focus()
  }
  const selection = window.getSelection()
  const range = selection.getRangeAt(0)
  range.deleteContents()
  const node = document.createElement('img')
  node.src = targetUrl
  node.style.width = '16px'
  node.style.height = '16px'
  range.insertNode(node)
  range.collapse()
  selection.removeAllRanges()
  selection.addRange(range)
}
const appendEmoji2 = (i) => {
  // let targetUrl = `https://cdn.sunofbeaches.com/emoji/${i}.png`
  /* 将emoji插入到光标位置 */
  // let imgTag = document.createElement('img')
  // imgTag.src = targetUrl
  // imgTag.width = 16
  // imgTag.height = 16
  // const inputBox = document.querySelector('.input-box')
  // inputBox.append(imgTag)
}
/* 评论列表 */
const comments = ref([
  {
    avatar: 'https://cdn.sunofbeaches.com/emoji/1.png',
    name: '张三',
    time: '2019-01-01',
    content: '这是一条评论',
    replyCount: 2,
    replys: [
      {
        avatar: 'https://cdn.sunofbeaches.com/emoji/1.png',
        name: '张三',
        time: '2019-01-01',
        content: '这是一条回复'
      },
      {
        avatar: 'https://cdn.sunofbeaches.com/emoji/1.png',
        name: '张三',
        time: '2019-01-01',
        content: '这是一条回复'
      },
      {
        avatar: 'https://cdn.sunofbeaches.com/emoji/1.png',
        name: '张三',
        time: '2019-01-01',
        content: '这是一条回复'
      }
    ]
  },
  {
    avatar: 'https://cdn.sunofbeaches.com/emoji/1.png',
    name: '张三',
    time: '2019-01-01',
    content: '这是一条评论',
    replyCount: 2,
    replys: [
      {
        avatar: 'https://cdn.sunofbeaches.com/emoji/1.png',
        name: '张三',
        time: '2019-01-01',
        content: '这是一条回复'
      },
      {
        avatar: 'https://cdn.sunofbeaches.com/emoji/1.png',
        name: '张三',
        time: '2019-01-01',
        content: '这是一条回复'
      },
      {
        avatar: 'https://cdn.sunofbeaches.com/emoji/1.png',
        name: '张三',
        time: '2019-01-01',
        content: '这是一条回复'
      }
    ]
  }
])
const handleMores = (index) => {
  console.log(index, 'index')
  comments.value[index].reply.push({
    avatar: 'https://cdn.sunofbeaches.com/emoji/1.png',
    name: '张三',
    time: '2019-01-01',
    content: '这是一条回复'
  })
}
const handleReply = (index) => {
  console.log(index, 'index')
  comments.value[index].reply.push({
    avatar: 'https://cdn.sunofbeaches.com/emoji/1.png',
    name: '张三',
    time: '2019-01-01',
    content: '这是一条回复'
  })
}
const keyMap = ref({
  pid: 'parent_comment_id',
  id: 'id',
  isAdmin: 'admin_comment'
})
const commentDatas = ref([
  {
    id: 1,
    admin_comment: 0,
    avatar: 'https://img2.baidu.com/it/u=134769530,4268043097&fm=253&fmt=auto&app=138&f=JPEG?w=533&h=333',
    create_time: '2020-05-31 23:03:55',
    email: '',
    nickname: 'nickname1',
    parent_comment_id: null,
    content: '我是评论1'
  },
  {
    id: 2,
    admin_comment: 0,
    avatar: 'https://img2.baidu.com/it/u=3133697304,2308274678&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313',
    create_time: '2020-06-1 23:03:55',
    email: '',
    nickname: 'nickname2',
    parent_comment_id: 1,
    content: '我是评论2'
  },
  {
    id: 3,
    admin_comment: 0,
    avatar: 'https://img2.baidu.com/it/u=3772577665,2044310843&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=727',
    create_time: '2020-05-2 23:03:55',
    email: '',
    nickname: 'nickname3',
    parent_comment_id: null,
    content: '我是评论3'
  },
  {
    id: 4,
    admin_comment: 0,
    avatar: 'https://img0.baidu.com/it/u=3966731730,957573008&fm=253&fmt=auto&app=138&f=JPEG?w=281&h=500',
    create_time: '2020-06-2 23:03:55',
    email: '',
    nickname: 'nickname4',
    parent_comment_id: 2,
    content:
      '我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,我是评论,'
  }
])
const submitComment = (item) => {
  console.log('item: ', item)
}
</script>

<style lang="scss" scoped>
.parent {
  display: flex;
  .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 20px;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .child {
    flex: 1;
    position: relative;
  }
}

.input-action-part {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  margin-top: 15px;
}
.acition-emoji {
  display: flex;
  align-items: center;
  .emoji-trigger {
    margin-right: 15px;
    cursor: pointer;
    i {
      font-size: 16px;
    }
    #imgbox {
      width: 0;
    }
    .uploadimg-box {
      cursor: pointer;
    }
  }
}
.acition-btn {
  display: flex;
  align-items: center;
  .content-toggle {
    margin-right: 15px;
    font-size: 16px;
    color: #ccc;
  }
  .content-post-btn {
    background-color: #abcdff;
    width: 100px;
    text-align: center;
    font-size: 14px;
    // background: #1e80ff;
    border-radius: 4px;
    color: #fff;
    padding: 10px;
    border: 0;
    cursor: pointer;
    &.active {
      background-color: $jjColor;
    }
  }
}
/* 评论列表样式 */
.comment-list {
  margin-top: 15px;
  padding: 10px;
  border-radius: 4px;
  background-color: #fff;
  .comment-item {
    display: flex;
    margin-bottom: 10px;
    .comment-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .comment-content {
      flex: 1;
      padding-left: 10px;
      .comment-user {
        font-size: 14px;
        color: #333;
        margin-bottom: 5px;
      }
      .comment-content-text {
        font-size: 14px;
        color: #333;
        margin-bottom: 5px;
      }
      .comment-content-time {
        font-size: 12px;
        color: #999;
      }
    }
  }
}
</style>
